<!--
  * @Description: 我的投递
  * @Author: rcc
  * @Date: 2024-08-07 14:58:39
  * @FilePath: /rc-recruitment/pages/office/delivery/delivery.vue
-->

<template>
  <view class="p-h24">
    <view class="flex-c m-t10">
      <up-tabs :current="tabIndex" :list="tabs" :activeStyle="{
        'color': '#3F77FB',
        'font-size': '28rpx',
        'font-weight': 'bold',
      }" :inactiveStyle="{
  'color': '#666666',
  'font-size': '28rpx',
  'font-weight': 'bold',
}" lineColor="#3F77FB" @change="onTabsChange" />
    </view>

    <view class="m-t20">
      <template v-if="!isEmpty">
        <view v-for="item in list" :key="item.id" class="card flex">
          <view class="dot m-r20" />

          <view class="flex-1 flex-d-sb h">
            <view class="flex">
              <text class="flex-1 text-700-130">{{ item.title }}【全职】</text>
              <text class="text-700-530">{{ item.money_range }}</text>
            </view>

            <view class="flex">
              <text class="tag m-r10 text-400-324">{{ item.area }}</text>
              <!-- <text class="tag m-r10 text-400-324">男女不限</text> -->
              <text class="tag m-r10 text-400-324">{{ item.lowest_education }}</text>
            </view>

            <view class="flex">
              <text class="flex-1 text-400-326">{{ item.company }}</text>
              <text class="text-400-326">申请日期：{{ timeFormat(item.createtime * 1000) }}</text>
            </view>
          </view>
        </view>
      </template>
      <view v-else class="p-v80">
        <up-empty />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import { usePagination } from '@/hooks/use-pagination'
import { timeFormat } from '@/utils/utils'
const tabIndex = ref(0)
const tabs = reactive([
  { name: '投递成功' },
  { name: '已查看' },
  { name: '面试' },
  { name: '不合适' },
])

const onTabsChange = (e: { index: number }) => {
  tabIndex.value = e.index

  refresh()
}

const { isEmpty, list, refresh, loadMore } = usePagination(
  (params) => {
    return uni.$u.get('/position/tdlst', { type: tabIndex.value, ...params })
  },
  { immediate: false, showLoading: true },
)

onLoad((e: any) => {
  tabIndex.value = Number(e.type || '0')

  loadMore()
})

onPullDownRefresh(() => {
  refresh().then(() => uni.stopPullDownRefresh())
})

onReachBottom(loadMore)
</script>

<style lang="scss" scoped>
page {
  background-color: $page-color-4;
}

.card {
  height: 210rpx;
  margin-bottom: 20rpx;
  padding: 30rpx 20rpx;
  border-radius: 20rpx;
  background-color: $bg-color-1;

  &:last-child {
    border: none;
  }

  .dot {
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
    background-color: #E6242B;
  }

  .tag {
    height: 44rpx;
    padding: 0 10rpx;
    border-radius: 4rpx;
    text-align: center;
    line-height: 44rpx;
    background-color: #F3F3F3;
  }
}
</style>
